/**
 * Created by shc@lierda.com on 2017/2/22.
 */
var React = require('react');

var Header = require('../widget/Header');
var Footer = require('../widget/Footer');
var Pingpai = require('../widget/Pingpai');
var Active = require('../components/Active');
var MsgBox = require('../components/MsgBox');
var ajax=require('../tools/ajax');

module.exports = React.createClass({
    getInitialState: function () {
        this.itemsChanged = false;
        return {
            theme:"Default", //Default/Blue
            wxy:"",
            lfList:[],//左边列表
            lfDom:"",//左边虚拟DOM
            rtList:[],//右边列表
            oldrtList:[],
            rtDom:"",//右边虚拟DOM
            goods:{},
            limit:0,//二级分类数量限制
            cateId:"",//一级分类
            pullUpFlag:false,//更多判断
        }
    },

    componentDidMount: function () {
        this.getProductCate();
        this.refs.Header.setState({searchFlag:true});
        localStorage.back ="";
    },
    componentDidUpdate() {
        var p=this;
        // 仅当列表发生了变更，才调用iscroll的refresh重新计算滚动条信息
        if (this.itemsChanged) {
            p.myScroll.refresh();
        }
    },
    /**获取商品分类*/
    getProductCate: function () {
        var p = this;
        ajax("POST","getProductCate",{},function(dt){
            if(dt && dt.success){
                var objs = dt.data;
                var list = [];
                for(var i = 0;i < objs.length;i++){
                    list.push(objs[i]);
                }
                var parent_id =localStorage.getItem("parent_id");
                if(parent_id){
                    p.setState({wxy:parent_id,parent_id:parent_id, lfList: list});
                    p.getCateproinfo(0);
                }else {
                    //第一个分类id
                    p.setState({wxy: objs[0].id,parent_id: objs[0].id, lfList: list});
                    p.getCateproinfo(0);
                }
            }
        });
        setTimeout(p.feileiScroll,500);
    },
    /**一级分类*/
    cate: function (e) {
        var p=this;
        var parent_id = e.currentTarget.getAttribute("data");
        this.setState({wxy:parent_id,parent_id:parent_id,limit:0,rtList:[]},()=>{
            p.getCateproinfo(0);
        });
        p.myScroll.scrollTo(0, 0);
        localStorage.setItem("parent_id",parent_id);
    },
    /**根据顶级分类获取二级分类*/
    getCateproinfo:function(limit){
        var p = this;
        p.setState({pullUpFlag:false});
        var parent_id = p.state.parent_id;
        ajax("POST","getCateproinfo",{parent_id:parent_id,limit:limit},function(dt){
            if(dt.data.length >0 && dt.success){
                var objs = dt.data;
                console.log(objs);
                var rtList = p.state.rtList;
                var oldrtList = p.state.oldrtList;
                if(oldrtList.length>0){
                    if(objs[0].id !== oldrtList[0].id) {
                        for (var i = 0; i < objs.length; i++) {
                            rtList.push(objs[i]);
                        }
                    }
                }else{
                    rtList = objs;
                }
                p.setState({rtList:rtList,oldrtList:objs});
                if(p.myScroll){
                    p.myScroll.refresh();
                }
            }else{
                p.refs.MsgBox.setState({
                    type: "no",
                    timeout:1500,
                    show:true,
                    word:"已经到最底了"
                })
            }
        });
    },
    /**修改购物车数量*/
    fleshNum:function(){
        this.refs.Header.fleshNum();
    },
    feileiScroll(){
        var p =this;
        p.myScroll = new IScroll("#feileiScroll",{
            // 默认iscroll会拦截元素的默认事件处理函数，我们需要响应onClick，因此要配置
            preventDefault: false,
            // 禁止缩放
            zoom: false,
            // 支持鼠标事件，因为我开发是PC鼠标模拟的
            mouseWheel: true,
            // 滚动事件的探测灵敏度，1-3，越高越灵敏，兼容性越好，性能越差
            probeType: 3,
            // 拖拽超过上下界后出现弹射动画效果，用于实现下拉/上拉刷新
            bounce: true,
            // 展示滚动条
            scrollbars: false
        });
        p.myScroll.on("scroll", p.onScroll);
        p.myScroll.on("scrollEnd", p.onScrollEnd);
    },
    onScroll() {
        // 下拉区域
        if (this.myScroll.y <= this.myScroll.maxScrollY + 5) {
            this.onPullUp();
        }
    },
    onScrollEnd() {
        var p=this;
        // 滑动结束后，停在加载区域
        if (p.myScroll.y <= p.myScroll.maxScrollY) {
            // 发起了加载，那么更新状态
            //if (p.state.pullUpStatus == 0) {
            //    p.setState({pullUpStatus: 3});
            //}
            var limit = p.state.limit;
            limit = limit + 2;
            p.setState({limit:limit,pullUpFlag:true},()=>{
                p.itemsChanged = true;
                setTimeout(function(){
                    p.getCateproinfo(limit);
                },1500);
            });
        }
    },
    render: function () {
        var p = this;
        var lfList = this.state.lfList;
        var rtList = p.state.rtList;
        if(lfList) {
            var lfDom = lfList.map(function (o,index) {
                return (
                    <div key={index} className={o.id == p.state.wxy  ? "category_d active" : "category_d"} onClick={p.cate} data={o.id}>
                        <div>{o.cat_name}</div>
                    </div>
                )
            });
        }
        if(rtList){
            var rtDom = rtList.map(function(obj,index){
                return(
                    <li key={index} className="pro-con">
                        <div className="guo_title">
                            <img src={obj.picUrl}/>
                        </div>
                        <Active cate_id={obj.id} countryid={obj.countryid}></Active>
                    </li>
                )
            });
        }
        return (
            <div className="main"  id="main">
                <Header ref="Header" theme={p.state.theme} searchFlag={false} icon="#icon-fanhui" actLink="#"></Header>
                <div className="cate-left">
                    {lfDom}
                </div>
                <div id="feileiScroll" ref="fenleiWrap" className="container-t wrap">
                    <ul style={{minHeight:"28.66rem"}} className="gj-container">
                        {rtDom}
                        <li className="pullUp" style={{visibility:p.state.pullUpFlag?"visible":"hidden"}}>
                            <div className="refresh loading"></div>
                        </li>
                    </ul>
                </div>
                <MsgBox ref="MsgBox"></MsgBox>
                <Footer witchSelected="fenlei"></Footer>
            </div>
        )
    }
});
